<script lang="ts" setup>
import { onMounted } from 'vue'
import BaseMap from './BaseMap.vue'
import Panel from './Panel.vue'
import { ref } from 'vue'
import MapSwitch from './MapSwitch.vue'
import ControlSide from './ControlSide.vue'

const mapStatus = ref(0)
const routeNetVal = ref(false)
const updateMapStatus = (data) => {
  mapStatus.value = data.status
  routeNetVal.value = data.routeNet
}
const panelRadio = ref(null)
const handleChangePanel = (val) => {
  panelRadio.value = val
}
const mapRef = ref()

onMounted(() => {})
</script>

<template>
  <div class="map__containner">
    <div ref="containerRef" class="map__content">
      <div ref="mapBoxRef" style="height: 100%">
        <BaseMap
          :id="'home-map'"
          ref="mapRef"
          :getMapStatus="mapStatus"
          :getRouteNet="routeNetVal"
        />
      </div>
    </div>
    <div class="map__panel">
      <Panel />
    </div>
    <ControlSide @changePanel="handleChangePanel" />
    <MapSwitch
      v-if="panelRadio === 1"
      @update="updateMapStatus"
      :mapStatus="mapStatus"
      :routeNetVal="routeNetVal"
    />
    <!-- 禁止飞行区域 -->
    <div class="polygon" v-if="panelRadio === 0" @update="updateMapStatus">
      <div class="label">禁飞区</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.map__containner {
  width: 100%;
  height: 100%;
  position: relative;
  .map__content {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .map__panel {
    width: 100%;
    position: absolute;
    bottom: 34px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .panel__map {
      width: 310px;
      height: 220px;
      position: relative;
      border: 2px solid #3b77fc;
      .video__button {
        position: absolute;
        right: 16px;
        bottom: 10px;
        z-index: 99;
        padding: 2px 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 198, 255, 1);
        span {
          font-size: 14px;
          // line-height: 34px;
          margin-left: 5px;
        }
      }
    }
    img {
      width: 100px;
      height: auto;
    }
    &.is--change {
      background: rgba(19, 40, 69, 1);
      padding: 0px 10px;
    }
  }

  .mode_change_box {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    background-color: rgba(39, 69, 146, 0.57);
    border: 1px solid #274592;
    .button__item {
      width: 96px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      font-size: 20px;
      color: rgba(172, 185, 237, 1);
      cursor: pointer;
      &.is--active {
        background: #274592;
      }
    }
  }
  // 禁止飞行区域绘制
  .polygon {
    width: 245px; /* 宽度 */
    height: 163px; /* 高度 */
    background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
    clip-path: polygon(20% 0%, 100% 20%, 80% 100%, 0% 80%); /* 不规则多边形 */
    position: relative;
    position: absolute;
    top: 10%;
    left: 30%;
  }
  .label {
    position: absolute;
    color: white;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.hover__video {
  height: 259px;
  position: absolute;
  top: 12px;
  right: 10px;
  background: #0e294d;
  .hover__button {
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
    width: 32px;
    height: 100px;
    background: #0e294d;
    border-radius: 4px 0px 0px 4px;
  }

  &.is--open {
    width: 460px;
    padding: 12px;
    transition: width 1s;
    .hover__button {
      &::before {
        content: '>>';
        width: 32px;
        height: 100px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .hover__content {
      position: absolute;
      width: calc(100% - 24px);
      height: calc(100% - 24px);
      .video__button {
        padding: 2px 4px;
        position: absolute;
        right: 20px;
        bottom: 17px;
        z-index: 99;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 198, 255, 1);
        span {
          font-size: 14px;
          // line-height: 30px;
          margin-left: 5px;
        }
      }
    }
  }
  &.is--close {
    width: 0;
    padding: 0;
    transition: width 1s;
    .hover__button {
      &::before {
        content: '<<';
        width: 32px;
        height: 100px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .hover__content {
      position: absolute;
      width: 0;
      height: 0;
    }
  }
}
</style>
